<template>
    <page-layout>
        <a-card>
            <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-row :gutter="24">
                  <a-col :span="24">
                    <a-form-model-item label="下拉多选">
                        <z-multi-select-tag
                            v-model="form.selectValue"
                            :options="dictOptions1"
                            placeholder="请选择">
                        </z-multi-select-tag>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-model-item label="checkbox">
                        <z-multi-select-tag
                            v-model="form.checkboxValue"
                            :options="dictOptions1"
                            type="checkbox">
                        </z-multi-select-tag>
                    </a-form-model-item>
                  </a-col>
                    <a-col :span="24">
                      <a-form-model-item label="下拉搜索" >
                          <z-search-select-tag placeholder="请选择" v-model="form.selectSearchValue" dict="MB_SYSTEM_YES_NO"></z-search-select-tag>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-model-item label="字典下拉" >
                        <z-dict-select-tag  v-model="form.sex" allowClear placeholder="请输入用户性别"  dictCode="MB_SYSTEM_YES_NO"/>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-model-item label="字典下拉1" >
                          <z-dict-select-tag  v-model="form.sex" type="radio" placeholder="请输入用户性别"  dictCode="MB_SYSTEM_YES_NO"/>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-model-item label="字典下拉2" >
                          <z-dict-select-tag  v-model="form.sex" type="radioButton" placeholder="请输入用户性别"  dictCode="MB_SYSTEM_YES_NO"/>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-model-item label="用户选择" >
                        <ZSelectMultiUser v-model="form.user"/>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-model-item label="部门选择(多选)">
                      <ZSelectDept v-model="deptId" :tree-checkable="true" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="日期选择">
                           <a-date-picker v-model="date1" />
                        </a-form-model-item>
                      </a-col>
                       <a-col :span="24">
                        <a-form-model-item label="用户选择">
                           <ZSelectUserByDep :multi="false" v-model="form.userdept" />
                        </a-form-model-item>
                      </a-col>
                      <a-col :span="24">
                        <a-form-model-item label="高级查询">
                          <ZSuperQuery :fieldList="superQuery.fieldList"  />
                        </a-form-model-item>
                      </a-col>
                    <a-col :span="24">
                      <a-form-item label="图片上传">
                        <z-image-upload :number="2" v-model="imgList"></z-image-upload>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="文件上传">
                        <z-upload v-model="fileList" :fileNames="fileNames" ></z-upload>
                        <!-- fileStorageType="Database" -->
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-model-item label="ZModal弹窗">
                        <a-button style="margin-right: 8px;" @click="()=>modal.visible=true">点击弹出ZModal</a-button>
                        <span style="margin-right: 8px;">全屏化：<a-switch v-model="modal.fullscreen"/></span>
                        <span style="margin-right: 8px;">允许切换全屏：<a-switch v-model="modal.switchFullscreen"/></span>
                      </a-form-model-item>
                      <z-modal
                        :visible.sync="modal.visible"
                        :width="1200"
                        :title="modal.title"
                        :fullscreen.sync="modal.fullscreen"
                        :switchFullscreen="modal.switchFullscreen"
                      >
                        <template v-for="(i,k) of 30">
                          <p :key="k">这是主体内容，高度是自适应的</p>
                        </template>
                      </z-modal>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="权限按钮测试">
                        <a-button v-hasPermi="'system:test:test'">测试</a-button>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="方法调用测试">
                        <a-button @click="deleteRecord">测试</a-button>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="文件上传">
                        <AuthImg style="width:100px;height:100px;" :fileNo="imgList[0]" />
                      </a-form-item>
                    </a-col>
                  </a-row>
            </a-form-model >
        </a-card>
    </page-layout>
</template>

<script>
import PageLayout from '@/layouts/PageLayout'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag.vue'
import ZMultiSelectTag from '@/components/dict/ZMultiSelectTag'
import ZSearchSelectTag from '@/components/dict/ZSearchSelectTag'
import ZSelectMultiUser from '@/components/zzbiz/ZSelectMultiUser'
import ZSelectUserByDep from '@/components/zzbiz/ZSelectUserByDep'
import AuthImg from '@/components/zz/AuthImg'
import Criteria from '@/utils/criteria'
import { OPERATOR } from '@/store/mutation-types'
import ZImageUpload from '@/components/zz/ZImageUpload'
import ZUpload from '@/components/zz/ZUpload'
import ZSelectDept from '@/components/zzbiz/ZSelectDept'
import ZSuperQuery from '@/components/zz/ZSuperQuery'

export default {
  components: {
    ZDictSelectTag,
    ZMultiSelectTag,
    ZSearchSelectTag,
    ZSelectMultiUser,
    PageLayout,
    ZImageUpload,
    ZUpload,
    ZSelectDept,
    ZSelectUserByDep,
    ZSuperQuery,
    AuthImg
  },
  data() {
    return {
      form: {
        user: 'admin',
        userdept: 'admin3,admin'
      },
      imgList: ['edd0aa7a-7d4a-4294-96a6-6d56ccff3292'],
      imgFileNo: 'edd0aa7a-7d4a-4294-96a6-6d56ccff3292',
      fileList: [], // '2128a0c4-6ffc-489a-b23f-8394b9cfc457', '402929b9-1f24-417f-85fe-90122feced6f'
      fileNames: [], // '111222.xlsx', '20220916对接.doc'
      dictOptions1: [
        { itemValue: '1', itemText: '男' },
        { itemValue: '2', itemText: '女' }
      ],
      modal: {
        title: '这里是标题',
        visible: false,
        fullscreen: true,
        switchFullscreen: true
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      date1: '2022-05-01',
      deptId: ['19'],
      superQuery: {
        fieldList: [
          { type: 'input', value: 'name', text: '姓名', children: [
            { type: 'input', value: 'name1', text: '姓名1' }
          ] },
          { type: 'select', value: 'sex', text: '性别', dictCode: 'ERP_COMMON_YESNO' },
          { type: 'number', value: 'age', text: '年龄' },
          {
            type: 'select', value: 'hobby', text: '爱好',
            options: [
              { label: '音乐', value: '1' },
              { label: '游戏', value: '2' },
              { label: '电影', value: '3' },
              { label: '读书', value: '4' }
            ]
          },
          { type: 'date', value: 'createdDate', text: '创建日期' },
          { type: 'user', value: 'createdBy', text: '创建人' },
          { type: 'dept', value: 'dept', text: '创建人部门' }
        ]
      },
      set: new Set(['add', 'edit'])
    }
  },
  auth: { // 权限校验注入设置
    deleteRecord: 'delete' // key为需要注入权限校验的方法名，这里为 deleteRecord 方法；值为需要校验的操作权限，这里为 delete 操作权限
  },
  methods: {
    deleteRecord() {
      // --auth-inject
      console.log('有执行权限')
    },
    exports() {
      // file/download/7a81e2df-4b62-4832-8fa0-069941897e38
    }
  },
  mounted() {
    // 查询构造器
    // 使用方法一
    const param = new Criteria()
    param.addCriterion('resourceType', OPERATOR.EQ, 'ELEMENT')
      .or()
      .addCriterion('username', OPERATOR.EQ, 'admin')
      .addCriterion('username', OPERATOR.EQ, 'admin1')
      .and()
      .addCriterion('age', OPERATOR.GT, 18)
      .addCriterion('score', OPERATOR.EQ, 60)
      .end()
      .end()
      .addOrder('createTime', true)
      .addOrder('updateTime', true)
    console.log(param)
    const aaa = ['admin', 'admin2', 'admin3']
    const ccc = new Criteria()
    aaa.forEach((item, i) => {
      if (i === 0) {
        ccc.or().addCriterion('user', OPERATOR.EQ, item)
      } else {
        ccc.addCriterion('user', OPERATOR.EQ, item)
      }
    })
    ccc.end()
    console.log(ccc)
    // 使用方法二
    const form = {
      username: 'admin',
      sex: '17'
    }
    const b = new Criteria()
    b.addCriterions(form, OPERATOR.LIKE)
    // console.log(b)
  }
}
</script>

<style>

</style>
